<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>毕业设计管理系统</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            display: flex;
            min-height: 100vh;
            flex-direction: column;
            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
        }
        .sidebar {
            min-width: 200px;
            max-width: 200px;
            height: 100vh;
            background-color: #f8f9fa;
            padding-top: 1rem;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
        }
        .main-content {
            flex: 1;
            padding: 2rem;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .header {
            background-color: #343a40;
            color: white;
            padding: 1rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .user-info a {
            color: white;
            text-decoration: none;
            margin-left: 1rem;
            transition: color 0.3s ease;
        }
        .user-info a:hover {
            color: #adb5bd;
            text-decoration: underline;
        }
        .nav-link {
            color: #495057;
            transition: color 0.3s ease;
        }
        .nav-link:hover {
            color: #007bff;
        }
        .nav-link.active {
            color: #007bff;
            font-weight: bold;
        }
        .logo {
            font-size: 1.5rem;
            font-weight: bold;
            color: white;
        }
    </style>
</head>
<body>

<!-- Header -->
<div class="header">
    <div class="logo">毕业设计管理系统</div>
    <div class="user-info">
        {% if request.user.is_authenticated %}
            <span>欢迎，{{ request.user.username }}</span>
            <a href="{% url 'logout' %}">退出登录</a>
        {% else %}
            <a href="{% url 'login' %}">登录</a>
        {% endif %}
    </div>
</div>

<div class="d-flex">

    <!-- Sidebar -->
    <div class="sidebar">
        <ul class="nav flex-column p-3">
        <a href="{% url 'notification_list' %}" class="nav-link">
    <i class="bi bi-bell"></i> 通知
    {% if has_unread_notifications %}
        <span class="badge bg-danger">新</span>
    {% endif %}
</a>

            <li class="nav-item">
                <a class="nav-link {% if request.resolver_match.view_name == 'question_view' %}active{% endif %}" href="/question/">题目管理</a>
            </li>
            <li class="nav-item">
                <a class="nav-link {% if request.resolver_match.view_name == 'topic_view' %}active{% endif %}" href="/topic/">选题管理</a>
            </li>
            {% if request.user.is_student %}
 <li class="nav-item">
    <a class="nav-link bg-primary text-white d-flex justify-content-between align-items-center"
       data-bs-toggle="collapse" href="#studentMenu" role="button" aria-expanded="false"
       aria-controls="studentMenu">
        <span><i class="bi bi-person me-2"></i> 进度跟踪-学生</span>
        <i class="bi bi-chevron-down small"></i>
    </a>

    <div class="collapse" id="studentMenu">
        <div class="list-group list-group-flush">
            <a href="{% url 'student_topics' %}" class="list-group-item list-group-item-action d-flex align-items-center">
                <i class="bi bi-book me-2"></i> 我的课题
            </a>
            <a href="{% url 'submit_question' %}" class="list-group-item list-group-item-action d-flex align-items-center">
                <i class="bi bi-question-circle me-2"></i> 提交问题
            </a>
            <a href="{% url 'list_topics' %}" class="list-group-item list-group-item-action d-flex align-items-center">
                <i class="bi bi-journal-text me-2"></i> 查进度
            </a>
        </div>
    </div>
</li>
            {% elif request.user.is_teacher %}
    <li class="nav-item">
    <a class="nav-link bg-primary text-white d-flex justify-content-between align-items-center"
       data-bs-toggle="collapse" href="#teacherMenu" role="button" aria-expanded="false"
       aria-controls="teacherMenu">
        <span><i class="bi bi-person me-2"></i>进度追踪-教师</span>
        <i class="bi bi-chevron-down"></i>
    </a>

    <div class="collapse" id="teacherMenu">
        <div class="list-group list-group-flush">
            <a href="{% url 'my_students' %}" class="list-group-item list-group-item-action d-flex align-items-center">
                <i class="bi bi-person-check me-2"></i> 我的学生
            </a>
            <a href="{% url 'topic_review' %}" class="list-group-item list-group-item-action d-flex align-items-center">
                <i class="bi bi-journal-text me-2"></i> 审核课题申请
            </a>
            <a href="{% url 'progress_statistics' %}" class="list-group-item list-group-item-action d-flex align-items-center">
                <i class="bi bi-bar-chart-line me-2"></i> 进度统计
            </a>
        </div>
    </div>
</li>

            {% elif request.user.is_admin %}
            <li class="nav-item">
                <a class="nav-link {% if request.resolver_match.view_name == 'project_list' %}active{% endif %}" href="/track/">进度跟踪管理</a>
            </li>
            {% endif %}
        </ul>
    </div>

    <!-- Main Content -->
    <div class="main-content">
        {% block content %}
        {% endblock %}
    </div>

</div>

<!-- 引入 Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>